<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<html>
<head>
    <title>短信发送</title>
    <link rel="stylesheet" href="/house/plugins/layui-v2.6.5/layui/css/layui.css">
    <script src="/house/plugins/layui-v2.6.5/layui/layui.js"></script>
    <script src="/house/plugins/jquery/jquery.min.js"></script>
    <link href="/house/themes/xecmoban_haier2015/style.css" rel="stylesheet" type="text/css" />
</head>

<style>
    #phone{
        width: 800px;
        height: 350px;
        border: 1px solid #ccc;
        margin: 0 auto;
        margin-top: 100px;
    }
    #login{
        background-color: orangered;
        color: white;
        font-size: large;
    }

</style>
<body>

<jsp:include page="header.jsp"></jsp:include>

<div id="phone">
    <center>
        <div id="model2" >
            <table>
                <tr>
                    <td>
                        <div class="layui-form-item input-item">
                            <input type="text" placeholder="请输入手机号" autocomplete="off" id="memPhone" name="memPhone" class="layui-input" style="width: 400px;margin-top: 70px">
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>
                        <div class="layui-form-item input-item">
                            <input type="text" placeholder="请输入验证码" autocomplete="off" id="codes" name="codes" maxlength="6" class="layui-input" style="width: 400px;">
                        </div>
                    </td>
                    <td>
                        <div class="layui-form-item input-item">
                            <input type="button" class="layui-btn layui-btn-primary" value="获取验证码" id="sendBtn" style="width:100px;border-color:#1e9fff !important;float: right;" onclick="sendCode()" >
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>
                        <div class="layui-form-item input-item">
                            <input type="button" id="login" onclick="login()" value="登录" autocomplete="off" class="layui-input" style="width: 400px;">
                        </div>
                    </td>
                </tr>
            </table>
        </div>
    </center>
</div>


<script>

    function login(){
        let codes=$("#codes").val();
        let memPhone = $("#memPhone").val();
        let datas={"codes":codes,"memPhone":memPhone};
        console.log(datas)
        if (codes=='' || codes.length != 6 ){
            layer.msg("请输入正确的验证码！")
            return;
        }else{
            $.ajax({
                type:'get',
                url:'/house/index/plogin',
                data:{"codes":codes,"memPhone":memPhone},
                dataType : "json",
                success:function(data) {
                    if(data.code=="200"){
                        layer.msg("登录成功");
                        window.location='/house/index/index';
                    }else if(data.code=="404"){
                        layer.msg("验证码不正确");
                    }else if(data.code=="500"){
                        layer.msg("手机号不正确");
                    }else if(data.code=="403"){
                        layer.msg("用户不存在");
                    }
                },
            })
        }
    }


    function sendCode(){
        var memPhone = $("#memPhone").val();
        if(memPhone == '' || memPhone.length != 11){
            layer.msg("请输入正确的手机号！");
            return;
        }else{
            $.ajax({
                type: 'get',
                url: '/house/sendCode',
                data: {
                    memPhone : memPhone,
                },
                dataType: 'json',
                success: function(data) {
                    if(data){
                        timer();
                    }else{
                        layer.msg("获取验证码失败");
                    }
                },
                error: function(data) {
                    layer.msg('连接超时！');
                },
            });
        }
    }

    var wait = 60;
    //倒计时
    function timer() {
        if(wait == 0){
            $("#sendBtn").val("获取验证码");
            $("#sendBtn").removeAttr("disabled");
            $("#sendBtn").css("border-color","1e9fff").css("background", "#ffffff").css("cursor", "pointer");
            wait = 60;
        }else{
            $("#sendBtn").attr("disabled","true");
            $("#sendBtn").css("border-color","fbfbfb").css("background", "#ccc").css("cursor", "not-allowed");
            $("#sendBtn").val(wait + "秒后重发");
            wait--;
            setTimeout(function() {timer()}, 1000);
        }
    }

</script>
</body>
</html>
